<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新能源充电桩云平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#8C8C8C',
                        light: '#F5F5F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-30">
        <div class="container mx-auto px-4 flex items-center justify-between h-16">
            <div class="flex items-center gap-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <div class="flex items-center gap-2">
                    <i class="fa fa-bolt text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-gray-800">充电桩云平台</h1>
                </div>
            </div>
            <div class="flex items-center gap-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索设备..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="flex items-center gap-3">
                    <button class="relative p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                        <i class="fa fa-bell text-lg"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div class="h-8 w-px bg-gray-200"></div>
                    <div class="flex items-center gap-2">
                        <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                        <span class="hidden md:inline text-sm font-medium">管理员</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside id="sidebar" class="bg-white w-64 shadow-sm fixed lg:static h-[calc(100vh-4rem)] z-20 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 overflow-y-auto">
            <nav class="p-4">
                <div class="space-y-1">
                    <a href="#" class="sidebar-item active">
                        <i class="fa fa-tachometer w-5 text-center"></i>
                        <span>控制台</span>
                    </a>
                    <a href="#devices" class="sidebar-item">
                        <i class="fa fa-plug w-5 text-center"></i>
                        <span>设备管理</span>
                    </a>
                    <a href="#transactions" class="sidebar-item">
                        <i class="fa fa-exchange w-5 text-center"></i>
                        <span>交易记录</span>
                    </a>
                    <a href="#pricing" class="sidebar-item">
                        <i class="fa fa-money w-5 text-center"></i>
                        <span>电价策略</span>
                    </a>
                    <a href="#reports" class="sidebar-item">
                        <i class="fa fa-bar-chart w-5 text-center"></i>
                        <span>数据分析</span>
                    </a>
                </div>

                <div class="mt-8 pt-6 border-t border-gray-100">
                    <h3 class="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider">系统管理</h3>
                    <div class="mt-3 space-y-1">
                        <a href="#users" class="sidebar-item">
                            <i class="fa fa-users w-5 text-center"></i>
                            <span>用户管理</span>
                        </a>
                        <a href="#settings" class="sidebar-item">
                            <i class="fa fa-cog w-5 text-center"></i>
                            <span>系统设置</span>
                        </a>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto p-4 lg:p-6 bg-gray-50">
            <div class="container mx-auto">
                <!-- 页面标题 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">控制台</h2>
                    <p class="text-gray-500 mt-1">实时监控充电桩网络运行状态</p>
                </div>

                <!-- 统计卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                    <!-- 总设备数 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">总设备数</p>
                                <h3 class="text-3xl font-bold mt-1" id="total-devices">0</h3>
                                <p class="text-success text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12 台 (本周)
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                <i class="fa fa-plug text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 在线设备 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">在线设备</p>
                                <h3 class="text-3xl font-bold mt-1" id="online-devices">0</h3>
                                <p class="text-gray-500 text-sm mt-2" id="online-rate">0%</p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
                                <i class="fa fa-signal text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 充电中设备 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">充电中设备</p>
                                <h3 class="text-3xl font-bold mt-1" id="charging-devices">0</h3>
                                <p class="text-warning text-sm mt-2" id="charging-rate">0%</p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                                <i class="fa fa-bolt text-xl"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 今日交易额 -->
                    <div class="bg-white rounded-xl p-5 card-shadow hover:shadow-md transition-shadow">
                        <div class="flex items-start justify-between">
                            <div>
                                <p class="text-gray-500 text-sm">今日交易额</p>
                                <h3 class="text-3xl font-bold mt-1" id="daily-revenue">¥0.00</h3>
                                <p class="text-primary text-sm mt-2 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12.5% (较昨日)
                                </p>
                            </div>
                            <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                                <i class="fa fa-money text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图表和设备列表 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                    <!-- 设备状态分布 -->
                    <div class="bg-white rounded-xl p-5 card-shadow lg:col-span-1">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-800">设备状态分布</h3>
                            <button class="text-gray-400 hover:text-primary">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                        <div class="h-64 flex items-center justify-center">
                            <canvas id="deviceStatusChart"></canvas>
                        </div>
                        <div class="grid grid-cols-2 gap-2 mt-4">
                            <div class="flex items-center gap-2">
                                <span class="w-3 h-3 rounded-full bg-success"></span>
                                <span class="text-sm text-gray-600">在线</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="w-3 h-3 rounded-full bg-warning"></span>
                                <span class="text-sm text-gray-600">充电中</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="w-3 h-3 rounded-full bg-gray-300"></span>
                                <span class="text-sm text-gray-600">离线</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="w-3 h-3 rounded-full bg-danger"></span>
                                <span class="text-sm text-gray-600">故障</span>
                            </div>
                        </div>
                    </div>

                    <!-- 今日电价曲线 -->
                    <div class="bg-white rounded-xl p-5 card-shadow lg:col-span-2">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-800">今日电价曲线</h3>
                            <div class="flex items-center gap-2">
                                <span class="text-sm text-primary font-medium" id="current-price">当前电价: ¥0.55/kWh</span>
                                <button class="text-gray-400 hover:text-primary">
                                    <i class="fa fa-refresh"></i>
                                </button>
                            </div>
                        </div>
                        <div class="h-64">
                            <canvas id="priceChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 最近活动设备 -->
                <div class="bg-white rounded-xl p-5 card-shadow mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-800">最近活动设备</h3>
                        <a href="#devices" class="text-primary text-sm hover:underline">查看全部</a>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">设备ID</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">型号</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">位置</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近活动</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody id="device-table-body" class="divide-y divide-gray-200">
                                <!-- 设备数据将通过JavaScript动态加载 -->
                                <tr class="animate-pulse">
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-24"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-6 bg-gray-200 rounded w-20"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-32"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-28"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-8 bg-gray-200 rounded w-24"></div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });

        // 模拟数据
        const mockData = {
            totalDevices: 1286,
            onlineDevices: 954,
            chargingDevices: 328,
            dailyRevenue: 428560.75,
            currentPrice: 0.55,
            deviceStatus: {
                online: 954,
                charging: 328,
                offline: 296,
                fault: 38
            },
            priceData: {
                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
                prices: [0.35, 0.35, 0.55, 0.75, 0.55, 0.75, 0.35]
            },
            recentDevices: [
                { id: 'EV-20230567', model: 'EC-5000', status: 'charging', location: '海淀区中关村大街1号', lastActive: '2分钟前' },
                { id: 'EV-20230421', model: 'EC-5000', status: 'online', location: '朝阳区建国路88号', lastActive: '5分钟前' },
                { id: 'EV-20230915', model: 'EC-3000', status: 'online', location: '西城区金融大街28号', lastActive: '12分钟前' },
                { id: 'EV-20230103', model: 'EC-5000', status: 'fault', location: '东城区王府井大街88号', lastActive: '35分钟前' },
                { id: 'EV-20230742', model: 'EC-3000', status: 'offline', location: '海淀区学院路38号', lastActive: '2小时前' }
            ]
        };

        // 填充统计数据
        document.getElementById('total-devices').textContent = mockData.totalDevices.toLocaleString();
        document.getElementById('online-devices').textContent = mockData.onlineDevices.toLocaleString();
        document.getElementById('online-rate').textContent = Math.round(mockData.onlineDevices / mockData.totalDevices * 100) + '%';
        document.getElementById('charging-devices').textContent = mockData.chargingDevices.toLocaleString();
        document.getElementById('charging-rate').textContent = Math.round(mockData.chargingDevices / mockData.totalDevices * 100) + '%';
        document.getElementById('daily-revenue').textContent = '¥' + mockData.dailyRevenue.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('current-price').textContent = '当前电价: ¥' + mockData.currentPrice + '/kWh';

        // 设备状态分布图表
        const statusCtx = document.getElementById('deviceStatusChart').getContext('2d');
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['在线', '充电中', '离线', '故障'],
                datasets: [{
                    data: [
                        mockData.deviceStatus.online,
                        mockData.deviceStatus.charging,
                        mockData.deviceStatus.offline,
                        mockData.deviceStatus.fault
                    ],
                    backgroundColor: [
                        '#52C41A', // success
                        '#FAAD14', // warning
                        '#D9D9D9', // gray
                        '#FF4D4F'  // danger
                    ],
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round(value / total * 100);
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });

        // 电价曲线图表
        const priceCtx = document.getElementById('priceChart').getContext('2d');
        new Chart(priceCtx, {
            type: 'line',
            data: {
                labels: mockData.priceData.labels,
                datasets: [{
                    label: '电价 (元/kWh)',
                    data: mockData.priceData.prices,
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#FFFFFF',
                    pointBorderColor: '#165DFF',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                return `电价: ¥${context.raw}/kWh`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 0.3,
                        ticks: {
                            callback: function(value) {
                                return '¥' + value;
                            }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 填充设备列表
        const deviceTableBody = document.getElementById('device-table-body');
        deviceTableBody.innerHTML = '';

        mockData.recentDevices.forEach(device => {
            let statusClass = 'bg-gray-100 text-gray-600';
            let statusText = device.status;

            switch(device.status) {
                case 'online':
                    statusClass = 'bg-success/10 text-success';
                    statusText = '在线';
                    break;
                case 'charging':
                    statusClass = 'bg-warning/10 text-warning';
                    statusText = '充电中';
                    break;
                case 'fault':
                    statusClass = 'bg-danger/10 text-danger';
                    statusText = '故障';
                    break;
                case 'offline':
                    statusClass = 'bg-gray-100 text-gray-500';
                    statusText = '离线';
                    break;
            }

            const row = document.createElement('tr');
            row.className = 'hover:bg-gray-50 transition-colors';
            row.innerHTML = `
                <td class="px-4 py-4 whitespace-nowrap font-medium text-gray-800">${device.id}</td>
                <td class="px-4 py-4 whitespace-nowrap text-gray-600">${device.model}</td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <span class="status-${device.status} inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" title="${device.status}">
                        <i class="fas ${device.status === '在线' ? 'fa-check-circle text-green-500' : device.status === '离线' ? 'fa-times-circle text-gray-500' : device.status === '充电中' ? 'fa-bolt text-yellow-500' : 'fa-exclamation-circle text-red-500'}"></i>
                        ${device.status}
                    </span>
                </td>
                <td class="px-4 py-4 whitespace-nowrap text-gray-600">${device.location}</td>
                <td class="px-4 py-4 whitespace-nowrap text-gray-500">${device.lastActive}</td>
                <td class="px-4 py-4 whitespace-nowrap">
                    <button class="text-primary hover:text-primary-dark text-sm font-medium">详情</button>
                </td>
            `;
            deviceTableBody.appendChild(row);
        });

        // 自动刷新数据函数
        function autoRefreshData() {
            // 这里可以添加实际的数据获取逻辑
            console.log("自动刷新数据...");
            
            // 模拟数据更新
            const newOnline = Math.floor(Math.random() * 100) + 900;
            document.getElementById('online-devices').textContent = newOnline.toLocaleString();
            document.getElementById('online-rate').textContent = Math.round(newOnline / mockData.totalDevices * 100) + '%';
        }

        // 每30秒自动刷新数据
        setInterval(autoRefreshData, 30000);

        // 响应式调整图表大小
        window.addEventListener('resize', function() {
            if (statusChart) statusChart.resize();
            if (priceChart) priceChart.resize();
        });
    </script>
</body>
</html>